<template>
    <div>
        <div class="blog-up">
            <p class="blog-up-name">Welcome to my blog</p>
        </div>
        <div class="blog-content">
            <h1>最近更新</h1>
            <div class="blog-content-updata">
                <el-row :gutter="40" type="flex" class="row-bg" justify="center">
                    <el-col :span="6"><div class="grid-content bg-purple">
                        <div class="blog-content-updata-up">
                            <p>2020年9月24日&nbsp;15:55</p>
                            <i class="el-icon-s-comment">0</i>
                        </div>
                        <div>
                            <h3>关于我</h3>
                            <p class="box">这是我们小组花一个多星期的时间完成的一个简单的博客项目，项目内容不是很多，还有很多需要完善的地方。后续会对项目进行更多的完善。谢谢大家</p>
                            <button @click="readsClick">Read More</button>
                        </div>
                    </div></el-col>
                    <el-col :span="6"><div class="grid-content bg-purple-light">
                        <div class="blog-content-updata-up">
                            <p>2020年9月24日&nbsp;12:55</p>
                            <i class="el-icon-s-comment">1</i>
                        </div>
                        <div>
                            <h3>动态展示界面</h3>
                            <p class="box">前言 之前给自己的博客中回到顶部功能主要用的setTimeout延时滚动，看到vue文档中点击对应标题，就可以平滑滚动到锚点，就很好奇是怎么实现的，看了一下网页的源码，发现是使用了一个叫做smooth-scroll的轻量插件，所以自己也鼓捣使用了这个插件，把原本用setTimeout回到顶部的功能也直接用这个插件实现。 使用插件 smooth-scroll</p>
                            <button @click="showClick">Read More</button>
                        </div>
                    </div></el-col>
                    <el-col :span="6"><div class="grid-content bg-purple">
                        <div class="blog-content-updata-up">
                            <p>2019年9月25日&nbsp;16:55</p>
                            <i class="el-icon-s-comment">4</i>
                        </div>
                        <div>
                            <h3>评论板块</h3>
                            <p class="box">前言 自己写了一个简单评论模块，实现下面的需求：点赞，回复，头像，通知等。 简单介绍 通知功能实现 当有访问者评论后，会通过邮件通知评论者和站长。使用插件为nodemailer，尝试了gmail、126、163邮箱，最终决定了126邮箱，因为gmail的安全机制导致有时候有些邮件发不出去，而用163邮箱容易被放到邮箱的垃圾箱中。在这个项目中，我自己注册了一个公用的126邮箱供开发者使用来发送邮件。</p>
                            <button @click="readClick">Read More</button>
                        </div>
                    </div></el-col>
                </el-row>
            </div>
        </div>
        <div>
            <Contact></Contact>
        </div>
    </div>
</template>

<script>
import Contact from '@/components/contact'

export default {
    name:'homepage',
    data(){
        return {
            
        }
    },
    components:{
        Contact
    },
    methods:{
        readsClick(){
            this.$router.push("/Read");
        },
        readClick(){
            this.$router.push("/Read1");
        },
         showClick(){
            this.$router.push("/Show");
        },
    },
    mounted(){
    }
}
</script>

<style scoped>
/* 开头 */
    *{
    margin: 0;
    padding: 0;
    }
    .box{
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 11;
        overflow: hidden;
    }
    .blog-up{
        background:url('../assets/sunset.jpg');
        height:570px;
        width:100%;
        background-size: 100% 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .blog-up-name{
        margin: 0;
        color: #fff;
        font-size: 45px;
        font-family: 'Times New Roman';
    }
    /* 中间内容 */
    .blog-content{
        height: 600px;
        background-color:#3b3d40;
        width: 100%;
        color: #fff;
    }
    
    .blog-content>h1{
        color: #fff;
        border-bottom: 2px solid #27b7d6;
        width: 200px;
        margin: 0 auto;
        padding-top: 45px;
        padding-bottom: 15px;
    }
    .blog-content-updata{
        width: 98%;
    }
    .blog-content-updata .el-row {
        margin-bottom: 20px;
        margin: 0 auto;
    }
   .el-row {
    margin-bottom: 20px;
    }
    .el-row:last-child{
        margin-bottom: 0;
    }
    .el-col {
        border-radius: 4px;
    }
    /* .bg-purple-dark {
        background: #99a9bf;
    } */
    .bg-purple {
        border: 2px solid #27b7d6;
    }
    .bg-purple-light {
        border: 2px solid  #27b7d6;
    }
    .grid-content {
        border-radius: 4px;
        height: 400px;
        text-align: left;
        padding: 20px 30px;
    }
    .grid-content p{
        margin-bottom: 10px;
        word-wrap: break-word;
    }
    .blog-content-updata-up{
        border-bottom: 1px solid #27b7d6;
    }
    .grid-content h3{
        margin: 10px 0px 15px 0px;
    }
    .grid-content button{
        border: none;
        height: 30px;
        width: 80px;
        background-color: #13eaea;
        border-radius: 5px;
        margin-top: 10px;
    }
    .row-bg {
        padding: 30px 0;
    }
</style>